<template>
	<view class="inv_records h-100vh">
		<view class="headbox relative pb-40">
			<view class="h-200"></view>
			<view class="c-fff text-center pb-30">您在推广过程中遇到任何问题，请联系您的专属客服经理</view>
			<view class="head_content_box rd-20 p-30 mx-40 fs-28 lh-50 mb-70">
				<view class="">客服经理{{superiors.superiors_name}}</view>
				<view class="text-center mb-10">
					微信：{{superiors.superiors_wx}} <text class="siconfont icon-fuzhi color-primary pl-10"></text>
				</view>
				<view class="text-center">
					电话：{{superiors.superiors_mobile}} <text class="siconfont icon-fuzhi color-primary pl-10"></text>
				</view>				
			</view>
			
			<view class="siconfont icon-wodeyouhuiquanbannerzhezhao rdzhezhao"></view>
		</view>
		
		
		<view class="mb-20 z-10 relative">
			<view class="menuitem">
				查看佣金
			</view>
			<view class="menuitem" @click="goPath('/pages/order/text-list?m_type=3')">
				推广必读
			</view>
			<view class="menuitem" @click="goPath('/pages/home/zhaoshang')">
				成为运营商
			</view>
			<view class="menuitem">
				上下架设置
			</view>
			<view class="menuitem" @click="goPath('/pages/person/agent_add')">
				添加下级
			</view>
			<view class="menuitem">
				邀请下级
			</view>
			<view class="menuitem" @click="congcha()">
				一证通查
			</view>
			<view class="menuitem">
				官方客服
			</view>
		</view>
		
		<view class="m-20 relative">
			<u-search placeholder="请输入下级姓名/电话" shape="square" v-model="search.keyword" :showAction="false" bgColor="#fff"></u-search>
		</view>
		
		
		<!-- 推广列表 -->
		<!-- <view class="shadow-s rd-16 p-20 bg-info-1 m-20">
			<view class="flex-y-center justify-between u-border-bottom pb-20 mb-20">
				<view class="fs-30">代理账号（lv2）</view>
				<view class="fs-26 c-666">为您贡献：<span class="color-error">￥0.00</span></view>
			</view>			
			<view class="my-20 fs-26 c-666">
				<view class="flex m-10">
					<view class="c-999 w-20v">代理姓名</view>
					<view>测试名称名称</view>
				</view>
				<view class="flex m-10">
					<view class="c-999 w-20v">手机号码</view>
					<view>18844488373</view>
				</view>
				<view class="flex m-10">
					<view class="c-999 w-20v">登录时间</view>
					<view>2025-01-09 12:39:22</view>
				</view>
				<view class="flex m-10">
					<view class="c-999 w-20v">创建时间</view>
					<view>2025-01-09 12:39:22</view>
				</view>
			</view>
			
			<view class="flex-y-center my-20">
				<view class="rd-8 p-20 bg-info-2 w-50v box-border mr-10">
					<view class="fs-30 mb-10">250</view>
					<view class="c-666 fs-22">直营已结算订单数</view>
				</view>
				<view class="rd-8 p-20 bg-info-2 w-50v box-border ml-10">
					<view class="fs-30 mb-10">126</view>
					<view class="c-666 fs-22">下级已结算订单数</view>
				</view>
			</view>
			
			<view class="flex-y-center justify-around text-center my-20 fs-24">
				<view class="w-25v bg-primary-2 rd-8 py-20 mr-10">上传结算凭证</view>
				<view class="w-25v bg-primary-2 rd-8 py-20 mr-10">订单反馈</view>
				<view class="w-25v bg-primary-2 rd-8 py-20 mr-10">更多操作</view>
				<view class="w-25v bg-primary-2 rd-8 py-20">更多操作</view>
			</view>
		</view> -->
		
		
		<!-- 推广列表 -->
				<view v-if="list.length > 0">
					<view class="shadow-s rd-16 p-20 bg-info-1 m-20" v-for="(item, index) in list" :key="item.id">
						<view class="flex-y-center justify-between u-border-bottom pb-20 mb-20">
							<view class="fs-30">代理账号（{{ item.username }}）</view>
							<view class="fs-26 c-666">为您贡献：<span class="color-error">￥{{ item.gongxian_rebate }}</span></view>
						</view>			
						<view class="my-20 fs-26 c-666">
							<view class="flex m-10">
								<view class="c-999 w-20v">代理姓名</view>
								<view>{{ item.username || '未设置' }}</view>
							</view>
							<view class="flex m-10">
								<view class="c-999 w-20v">手机号码</view>
								<view>{{ item.mobile }}</view>
							</view>
							<view class="flex m-10">
								<view class="c-999 w-20v">登录时间</view>
								<view>{{ item.last_login_time || '从未登录' }}</view>
							</view>
							<view class="flex m-10">
								<view class="c-999 w-20v">创建时间</view>
								<view>{{ item.createtime_text }}</view>
							</view>
						</view>
						
						<view class="flex-y-center my-20">
							<view class="rd-8 p-20 bg-info-2 w-50v box-border mr-10">
								<view class="fs-30 mb-10">{{ item.direct_settled_orders }}</view>
								<view class="c-666 fs-22">直营已结算订单数</view>
							</view>
							<view class="rd-8 p-20 bg-info-2 w-50v box-border ml-10">
								<view class="fs-30 mb-10">{{ item.subordinate_settled_orders }}</view>
								<view class="c-666 fs-22">下级已结算订单数</view>
							</view>
						</view>
						
<!-- 						<view class="flex-y-center justify-around text-center my-20 fs-24">
							<view class="w-25v bg-primary-2 rd-8 py-20 mr-10" @click="uploadSettlement(item)">上传结算凭证</view>
							<view class="w-25v bg-primary-2 rd-8 py-20 mr-10" @click="orderFeedback(item)">订单反馈</view>
							<view class="w-25v bg-primary-2 rd-8 py-20 mr-10" @click="showMoreActions(item)">更多操作</view>
							<view class="w-25v bg-primary-2 rd-8 py-20" @click="viewDetails(item)">查看详情</view>
						</view> -->
					</view>
					
					<!-- 加载更多 -->
					<view class="text-center py-30" v-if="hasMore">
						<u-loadmore :status="loadStatus" />
					</view>
					
					<!-- 没有更多数据 -->
					<view class="text-center py-30 c-999" v-else>
						<text v-if="list.length > 0">没有更多数据了</text>
					</view>
				</view>
				
				<!-- 空状态 -->
				<view v-else class="text-center py-100">
					<image src="/static/images/empty.png" mode="widthFix" class="w-200 h-200 mb-20"></image>
					<view class="c-999 fs-28">暂无下级代理</view>
					<view class="mt-20">
						<view class="invite-btn px-40 inline-block shadow_button" @click="goPath('/pages/person/agent_add')">立即邀请下级</view>
					</view>
				</view>
		
		
		<page-footer v-model="navigationList"></page-footer>
		
		<Popup :content="systemContentdata.content" :title="systemContentdata.title" :show="showSystemContent" @close="showSystemContent=false"/>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import ConfirmReceipt from '@/components/confirm_receipt/confirm_receipt.vue';
	import pageFooter from "@/components/pageFooter";
	export default {
		components: {
			ConfirmReceipt,
			pageFooter
		},
		data() {
			return {
				search:{
					keyword: '',
				}, 
				superiors:{
					superiors_mobile:'',
					superiors_wx:'',
					superiors_name:'',
				},
				showSystemContent : false,
				systemContentdata:{
					content:'',
					title:''
				},
				navigationList: [{
						"name": "首页",
						"link": "/pages/home/home",
						"icon": "home-fill"
					},
					{
						"name": "推广",
						"link": "/pages/shop/inv_records",
						"icon": "share-fill"
					},
					{
						"name": "客服",
						"link": "/pages/my/kefu",
						"icon": "weixin-fill"
					},
					{
						"name": "我的",
						"link": "/pages/my/index",
						"icon": "account-fill"
					}
				],//底部导航
				// 分页参数
				page: 1,
				pageSize: 10,
				total: 0,
				hasMore: true,
				loadStatus: 'loadmore',
				
				// 数据列表
				list: [],
			};
		},
		onLoad(opt) {
			this.nextUserIndex();
		},
		onShow() {
			
		},
		
		methods: {
			//获取下级代理
			nextUserIndex() {
				var that = this
				that.$httpApi.nextUserList(that.search).then((res) => {
					if (res.code == 1) {
						that.superiors.superiors_mobile = res.data.superiors_mobile
						that.superiors.superiors_wx = res.data.superiors_wx
						that.superiors.superiors_name = res.data.superiors_name
						that.list = res.data.data.data
					}
				})
			},
			goPath(url) {
				uni.navigateTo({
					url: url
				})
			},
			congcha(){
				this.$httpApi.popDictionary().then((res) => {
					if (res.code == 1) {
						this.showSystemContent = true;
						this.systemContentdata.content = res.data.tongcha;
						this.systemContentdata.title = '一证通查';
					}
				})
			},
			// 复制
			copyBtn(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						console.log('success');
					}
				});
			},
			
		},
		onReachBottom() {
			// if (this.status == 'nomore' || this.status == 'loading') {
			// 	return
			// }
			// this.page++
			// this.getList()
		},
	}
</script>

<style lang="less">
	.inv_records{
		background: #F5F9FF;
	}
	.headbox{
		background:url('@/static/images/Frame 8@2x.png') no-repeat;
		background-size: 100%;
		.head_content_box{
			background: linear-gradient( 90deg, #FFFFFF 0%, #8AB5FF 100%);
		}
	}
	.rdzhezhao{
		position: absolute;
		bottom:-194rpx;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: clamp(80rpx, 20vw, 200rpx);
	  -webkit-mask-image: linear-gradient(black, black);
	  mask-image: linear-gradient(black, black);
	  -webkit-mask-size: 100% 100%;
	  mask-size: 100% 100%;
	  -webkit-mask-position: center;
	  mask-position: center;
	  color:#f7f8fa;
	  z-index: 1;
	}
	.menuitem{
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(111,159,255,0.19);
		color: #1D3B5E;
		border-radius: 20rpx;
		background: #fff;
		font-size: 28rpx;
		width: 24%;
		text-align: center;
		padding:30rpx 0;
		box-sizing: border-box;
		margin:8rpx 0.4%;
		font-weight: bold;
		display: inline-block;
	}
</style>